<template>
	<view >
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
				<text style="display: inline-block; vertical-align: top; color:#666">返回</text>
			</view>
		</view>
		<view class="container">
			<!-- 背景色区域 -->
			<view  v-if="noticeLIst.length==0" class="default" :style="{height: heightContent +'px'}">
				<image :src="url()+'/wximg/qs1.png'"></image>
			</view>
			
			<view class="wrapper">
				<view v-for="(item,i) in noticeLIst"  :key="i" >
					<text class="date">{{item.sendTime}}</text>
					<view  class="model">
					<!-- 	<text class="noticeBt"></text> -->
						<view class="modelrt">
							<uni-collapse @change="change">
								<uni-collapse-item   :notineObject="item"
								:thumb="url()+'/wximg/notice.png'" 
								 :title="item.title" >
									<view style="padding:15rpx 0; color: #888;"> 
									{{item.content}}
									 </view>
								</uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
			</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import {selectSysNotificationList} from '@/api/request.js';
	import url from '@/api/url.js';
	import service from '../../service.js';
		let user=service.getUsers().user;
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
		return {
		url:url,
		noticeLIst:[],
		heightContent:''
		}
		},
		onReady(){
				let that = this
				uni.getSystemInfo({
					success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
					// res - 各种参数
			　　    let info = uni.createSelectorQuery().select(".default");// 获取某个元素
			　　　  info.boundingClientRect(function(data) { //data - 各种参数
						 let view  = res.windowHeight - data.top-40
						 that.heightContent = view
		　　        }).exec()
					}
				});		
		},
		onLoad() {
			user=service.getUsers().user;
			this.init();
		},
			methods: {
				change(res){
				},
				init(){//初始化列表
					let  param={
						userIds:user.id,
					};
					let thsi=this;
					selectSysNotificationList(param).then(res => {
						if (res.code == 200) {
							this.noticeLIst=res.map.data;
							if(this.noticeLIst.length==0){
								uni.showToast({
									title: '暂无数据！',
									icon: 'none'
								});
							}
							
					
						} else{
							uni.showModal({
								title: '警告',
								content: 'code不符 请联系管理员',
								showCancel: false
							})
						}
					}).catch(err => {
						uni.showModal({
							title: '警告',
							content: '失败',
							showCancel: false
						})
					})
				},
				backlast(){
				uni.navigateBack({
				    delta: 1
				});
				},
				
				}
	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

     .date{
		 background-color: #e8e6e6;
		 padding: 5px 10px;
		 border-radius:10upx;
		 margin: 0 auto 20upx;
		 text-align: center;
		 display:block;
		 width: 160upx;
/* 		 position: absolute;
		 right: 0;
		 top:0;
		 color:#888 */
	 }
	/*通告标题*/
	.text-box {
		position: absolute;
		color: #fff;
		font-size: 35upx;
		bottom: 180upx;
		left: 5%;
		width: 91%;
		z-index: 2;
	    text-align: center;
		display: block;
	}
	.wrapper {
		position: absolute;
		width: 94%;
		top:140upx;
		left:3%;
		z-index: 2;
	}
	/* 通告 */
	.model {
		width:88%;
		margin:0 auto 30upx;
		padding: 35upx 6%;
		border-radius:13.5upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227,227,227,.5);
		position: relative;
		display: flex;
		align-items: center;
	}
	.default {
		position: absolute;
		width: 94%;
		top:140upx;
		left:3%;
		z-index: 2;
		border-radius:27upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content:center
			
	}
	.default  image {
		width:85%;
		margin: 0 auto;
	}
	.modelrt {
		width:100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #000;
		text-align: left;
		line-height:45upx;
	}
	.noticeBt {
		background-color: #ec4d4d;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		margin-right: 2%;
		position: absolute;
		right: 15rpx;
		top: 30rpx;
	}

</style>
